<template>
    <el-row class="frame">
        <el-col :span="5" style="height:100%">
            <div class="block">
                <el-timeline>
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :icon="activity.icon"
                        :color="hisTaskId != undefined && activity.taskId == hisTaskId ? '#f95909' : ''" :type="activity.type"
                        :size="hisTaskId != undefined && activity.taskId == hisTaskId ? 'large' : 'normal'" :timestamp="activity.taskCreateTime"
                        @click.native="handleChangeTime(activity)">
                        <h4 :class="{selected:hisTaskId != undefined && activity.taskId == hisTaskId}">{{ activity.taskName }}</h4>
                        <span :class="{selected:hisTaskId != undefined && activity.taskId == hisTaskId}">{{ activity.assignee }}</span>
                        <span class='submit' v-if="activity.comment == '提交申请'">提交</span>
                        <span class='end' v-else-if="activity.comment == '自动结束'">结束</span>
                        <span class='agree' v-if="activity.pass == 'true'">同意</span>
                        <span class='reject' v-else-if="activity.pass == 'false'">拒绝</span>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </el-col>
        <el-col :span="19" style="height:100%">
            <iframe :src="reviewSrc" style="height:100%; width:100%;margin:0;border:0;"></iframe>
        </el-col>
    </el-row>
</template>
  
<script>
import { listLeave, getLeave, delLeave, addLeave, updateLeave, getByInstanceId, checkTask, selectByInstanceId } from "@/api/leave/leave";
import { listTaskHistory } from '@/api/activiti/customprocess'
import { type } from "os";
export default {
    name: "reviewLeave",
    data() {
        return {
            title: '查看表单',
            reviewSrc: '',
            open: false,
            instanceId: '',
            taskId: '',
            hisTaskId:'',
            activities: [{
                content: '支持使用图标',
                timestamp: '2018-04-12 20:46',
                size: 'large',
                type: 'success',
            }, {
                content: '支持自定义颜色',
                timestamp: '2018-04-03 20:46',
                type: 'warning'
            }, {
                content: '支持自定义尺寸',
                timestamp: '2018-04-03 20:46',
                size: 'large',
                type: 'danger'
            }, {
                content: '默认样式的节点',
                timestamp: '2018-04-03 20:46'
            }],
            taskKey: '',
            userName:''
        }
    },
    created() {
        console.log("query", this.$route.query)
        this.instanceId = this.$route.query.instanceId
        this.taskId = this.$route.query.taskId
        this.taskType = this.$route.query.taskType
        this.taskKey = this.$route.query.taskKey
        this.queryHistoryTask()
    },
    mounted() {
        let src = this.$route.query.src;
        this.reviewSrc = decodeURIComponent(src);
        this.hisTaskId = this.$route.query.taskId
        console.log('src', src, 'reviewSrc', this.reviewSrc,'hisTaskId',this.hisTaskId)
    },
    methods: {
        handleChangeTime(activity) {
            if(activity.taskId == undefined) {
                return;
            }
            console.log('handleChangeTime click', activity)
            this.taskKey = activity.taskDefId
            this.reviewSrc = activity.url
            this.userName = activity.assignee
            this.hisTaskId = activity.taskId
        },
        async queryHistoryTask() {
            let response = await listTaskHistory(this.instanceId)
            console.log('queryHistoryTask res', response)
            this.activities = response.data
        }
    }
}
</script>
  
<style scoped>
.form {
    padding-top: 20px;
    padding-left: 50px;
}
.frame {
    height: 100%;
}
.selected {
    color: #f95909;
}

.dialog-footer {
    position: absolute;
    bottom: 50px;
    width: 100%;
    left: 50%;
}

.leave {
    height: calc(100% - 50px);
}

.block {
    padding-top: 20px;
    height: 100%;
    background-color: aliceblue;
    overflow: scroll;
}

.agree {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #32b683;
}

.reject {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #b63239;
}

.submit {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #1a8ae6;
}

.end {
    margin-left: 8px;
    font-size: 10px;
    color: white;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 19px;
    border-radius: 10px;
    background-color: #1a8ae6;
}
</style>
  